<template>
  <Popup
    v-model:show="showPopup"
    position="bottom"
    :style="{
      background: 'transparent',
      overflow: 'hidden',
      height: '100vh',
      'max-width': '100vw',
    }"
    ><div class="vessel">
      <div @click="showPopup = false" class="reelect-box">
        <div class="reelect-txt">返回</div>
      </div>
      <div class="body-vessel">
        <div class="information-box">
          <img :src="userInfo?.avatar?.[0]?.fileUrl || avatar" class="avatar" />
          <div>
            <div class="information-name">{{ userInfo?.studentName }}</div>
            <div class="information-school">
              {{
                userInfo?.schoolName +
                "&nbsp;&nbsp;&nbsp;&nbsp;" +
                userInfo?.gradeName +
                userInfo?.studentClassName
              }}
            </div>
            <div class="information-id">ID：{{ userInfo?.idNumber }}</div>
          </div>
        </div>
        <div class="level-experience">
          <div class="level-experience-one">
            LV.{{ userInfo?.grade
            }}<span class="text">{{ userInfo?.rankName }}</span>
          </div>
          <van-progress
            :percentage="percentageValue"
            stroke-width="6px"
            :show-pivot="false"
            track-color="rgba(255, 197, 0, 0.2)"
            color="#FFC500"
          />
          <div class="percentage-flex-box">
            <div class="percentage-text">
              还差{{ userInfo?.remainingExperience }}经验值可升级至LV.{{
                Number(userInfo?.grade) +
                1 +
                "&nbsp;" +
                userInfo?.nextLevelInfo?.rankName
              }}
            </div>
            <div class="percentage-title">
              {{
                userInfo?.experience + "/" + userInfo?.nextLevelInfo?.experience
              }}
            </div>
          </div>
        </div>
        <div class="detail-flex-box">
          <div class="item-box">
            <div class="text">{{ userInfo?.goldCoin }}</div>
            <div class="text-two">金币</div>
            <img src="@/assets/image/gold-icon.png" class="gold-icon" />
          </div>
          <!-- <div class="item-box">
            <div class="text">32 ></div>
            <div class="text-two">动态</div>
            <img
              src="@/assets/image/dynamic-condition.png"
              class="dynamic-condition"
            />
          </div> -->
          <div class="item-box" @click="goFirendClick">
            <div class="text">{{ friendData?.total }} ></div>
            <div class="text-two">好友</div>
            <img src="@/assets/image/friend.png" class="friend" />
          </div>
        </div>
        <!-- <div class="together-box">
          <div class="together-flex-box">
            <div>我的结伴</div>
            <img src="@/assets/image/my-details-right.png" class="right" />
          </div>
          <div class="name-avatar-flex-box">
            <div class="flex-item">
              <img src="" class="avatar" />
              <div>嘘嘘说</div>
            </div>
          </div>
        </div> -->
        <div class="horizontal-line"></div>
        <div class="together-box">
          <div class="together-flex-box" @click="goFirendClick">
            <div>我的好友</div>
            <img src="@/assets/image/my-details-right.png" class="right" />
          </div>
          <div class="name-avatar-flex-box">
            <div
              class="flex-item"
              v-for="item in friendData?.list"
              :key="item.studentId"
            >
              <img
                :src="(item?.avatar && item?.avatar?.[0]?.fileUrl) || avatar"
                class="avatar"
              />
              <div>{{ item.studentName }}</div>
            </div>
          </div>
        </div>
        <!-- <div class="horizontal-line" style="margin: 11px 0" /> -->
        <!-- <div class="together-box">
          <div class="together-flex-box">
            <div>动态数量</div>
            <div style="display: flex; align-items: center">
              <div class="right-text">32</div>
              <img src="@/assets/image/my-details-right.png" class="right" />
            </div>
          </div>
        </div> -->
        <!-- <div class="together-box">
          <div class="together-flex-box">
            <div>动态数量</div>
            <div class="right-text">99次</div>
          </div>
        </div> -->
        <div class="horizontal-line" style="margin: 11px 0" />
        <div class="together-box">
          <div class="together-flex-box">
            <div>累计完成任务</div>
            <div class="right-text">{{ taskNum || 0 }}次</div>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>
<script setup lang="ts">
import { getMyDetails, queryFriend } from "@/api/common";
import { useMainStore } from "@/store";
import { Popup } from "vant";
import { ref, watch } from "vue";
import avatar from "@/assets/svg/avatar.svg";
const showPopup = defineModel<boolean>("showPopup");
const percentageValue = ref(0);
const userInfo = ref();
type UserInfoList = {
  /*学生id */
  studentId: number;
  /*头像 */
  avatar: { fileUrl: string }[];
  /*学生姓名 */
  studentName: string;
  /*称号 */
  rankName: string;
  /*会员 */
  member: boolean;
  /*等级 */
  grade: number;
};
interface UserInfo {
  /*当前页 */
  pageNum: number;
  /*每页的数量 */
  pageSize: number;
  /*总记录数 */
  total: number;
  /*总页数 */
  pages: number;
  /*结果集 */
  list: UserInfoList[];
  /*是否为空 */
  emptyFlag: boolean;
}
const taskNum = ref(0);
const friendData = ref<UserInfo>();
const emit = defineEmits(["child-event"]);
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  searchCount: true,
  studentId: "",
  occurTime: "",
});
function goFirendClick() {
  showPopup.value = false;
  emit("child-event");
}
function init() {
  const mainStore = useMainStore();
  pagination.value.studentId = mainStore.studentInfo?.studentId;
  getMyDetails(pagination.value.studentId).then((res) => {
    userInfo.value = res.data.appGameStudentFriendVO;
    taskNum.value = res.data.taskNum;
    percentageValue.value =
      (userInfo.value.experience / userInfo.value.nextLevelInfo.experience) *
      100;
    queryFriend(pagination.value).then((res) => {
      friendData.value = res.data;
    });
  });
}
watch(showPopup, (newValue) => {
  if (newValue) {
    init();
  }
});
</script>
<style lang="scss" scoped>
.vessel {
  width: 100vw;
  height: 100vh;
  .body-vessel {
    position: absolute;
    bottom: 0;
    width: calc(375 / 375 * 100vw);
    height: calc(704 / 812 * 100vh);
    border-radius: 20px 20px 0px 0px;
    opacity: 1;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(195, 195, 195, 0.3);
    .together-box {
      .name-avatar-flex-box {
        display: flex;
        align-items: center;
        gap: 20px;
        width: calc(100% - 40px);
        margin: 13px auto;
        flex-wrap: nowrap;
        .flex-item {
          display: flex;
          flex-direction: column;
          gap: 8px;
          justify-content: center;
          align-items: center;
          width: 55px;
          overflow: hidden;
          .avatar {
            width: 50px;
            height: 50px;
            border-radius: 80px;
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: 350;
            line-height: 22px;
            letter-spacing: 0px;
            color: #666666;
          }
        }
      }
      .together-flex-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Source Han Sans;
        font-size: 18px;
        font-weight: 350;
        line-height: 32px;
        letter-spacing: 0px;
        color: #333333;
        padding: 0 20px 0 20px;
        .right-text {
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: 350;
          line-height: 22px;
          text-align: right;
          letter-spacing: 0px;
          color: #666666;
          margin: 0 0 0 4px;
        }
        .right {
          width: 10px;
          height: 10px;
        }
      }
    }
    .horizontal-line {
      border-top: 2px solid #eeeeee;
      width: 100%;
      margin: 20px 0;
    }
    .detail-flex-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      .item-box {
        // width: 105px;
        width: 157px;
        height: 85px;
        border-radius: 10px;
        opacity: 1;
        background: #faf6e8;
        position: relative;
        .friend {
          position: absolute;
          bottom: -14px;
          right: -6px;
          width: 50px;
          height: 65px;
        }
        .dynamic-condition {
          position: absolute;
          bottom: -25px;
          right: -15px;
          width: 64px;
          height: 84px;
        }
        .gold-icon {
          position: absolute;
          bottom: -11px;
          right: -11px;
          width: 55px;
          height: 55px;
        }
        .text {
          position: absolute;
          top: 10px;
          left: 54px;
          font-family: Source Han Sans;
          font-size: 28px;
          font-weight: 500;
          line-height: 37.8px;
          letter-spacing: 0px;
          font-variation-settings: "opsz" auto;
          color: #ffc500;
        }
        .text-two {
          position: absolute;
          bottom: 16px;
          left: 64px;
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: 350;
          line-height: 22px;
          letter-spacing: 0px;
          color: #666666;
        }
      }
    }
    .level-experience {
      margin: 11px auto;
      width: calc(100% - 40px);
      .percentage-flex-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 4px 0 0 0;
        .percentage-text {
          font-family: Source Han Sans;
          font-size: 10px;
          font-weight: 350;
          line-height: 14px;
          letter-spacing: 0px;
          color: #999999;
        }
        .percentage-title {
          font-family: Source Han Sans;
          font-size: 10px;
          font-weight: 350;
          line-height: 14px;
          text-align: right;
          letter-spacing: 0px;
          color: #666666;
        }
      }
      .level-experience-one {
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: 350;
        line-height: 22px;
        letter-spacing: 0px;
        color: #666666;
        .text {
          font-family: Source Han Sans;
          font-size: 12px;
          font-weight: 350;
          line-height: 20px;
          letter-spacing: 0px;
          color: #666666;
          margin: 1px 0 1px 6px;
        }
      }
    }
    .information-box {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 23px 25px 0 25px;
      gap: 22px;
      .information-name {
        font-family: Source Han Sans;
        font-size: 18px;
        font-weight: bold;
        line-height: 32px;
        letter-spacing: 0px;
        font-variation-settings: "opsz" auto;
        color: #333333;
      }
      .information-id {
        font-family: Source Han Sans;
        font-size: 12px;
        font-weight: 350;
        line-height: 20px;
        letter-spacing: 0px;
        color: #999999;
      }
      .information-school {
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: 350;
        line-height: 22px;
        letter-spacing: 0px;
        color: #666666;
      }
      .avatar {
        width: 68px;
        height: 68px;
        border-radius: 80px;
      }
    }
  }
  .reelect-box {
    margin: calc(10px + var(--dynamic-top)) 0 0 20px;
    width: 64px;
    height: 28px;
    background: url("@/assets/image/back.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .reelect-txt {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 500;
      line-height: 28px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      color: #ffffff;
      margin: 0 0 0 20px;
      text-align: center;
    }
  }
}
</style>
